<template>
    <div class="login">
        <!-- title左上角标题 v-mode,控制显示与隐藏 -->
        <el-dialog v-model="userStore.visable" title="用户登录" width="700">
            <!-- //对话框身体结构 -->
            <el-row>
                <el-col :span="12">
                    <div class="logint" v-show="scene == 0">
                        <el-form :model="LoginParams" :rules="rules" ref="form">
                            <el-form-item prop="phone">
                                <el-input placeholder="请输入你的手机号码" :prefix-icon="User"
                                    v-model="LoginParams.phone"></el-input>
                            </el-form-item>
                            <el-form-item prop="code">
                                <el-input placeholder="请输入手机验证码" :prefix-icon="Lock"
                                    v-model="LoginParams.code"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button :disabled="!isPhone || flag ? true : false" @click="getCode()">

                                    <CountDowm v-if="flag" :flag="flag" @getFlag="getFlag"></CountDowm>
                                    <span v-else>获取验证码</span>
                                </el-button>
                            </el-form-item>
                        </el-form>
                        <el-button style="width:90%;" type="primary" size="default" @click="Loginggt"
                            :disabled="!isPhone ? true : false">用户登录</el-button>
                        <div class="bottom" @click="wxlogin">

                            <p style="text-align: center;">微信扫码登陆</p>
                            <svg t="1714146949561" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4717" width="38" height="38">
                                <path
                                    d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"
                                    fill="#5D5D5D" p-id="4718"></path>
                            </svg>
                        </div>
                    </div>
                    <div v-show="scene === 1" class="webchat">
                        <div class="chatlogin">
                            <div id="login_container">

                            </div>
                            <div class="wxlogin2">
                                <p>手机短信验证码登录</p>
                                <svg @click="scene = 0" t="1714150253445" class="icon" viewBox="0 0 1024 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6416" width="32" height="32">
                                    <path
                                        d="M341.333333 896H256V128h512v768H341.333333z m0-85.333333h341.333334V213.333333H341.333333v597.333334z m85.333334-42.666667v-85.333333h170.666666v85.333333h-170.666666z"
                                        fill="#d81e06" p-id="6417"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="leftContent">
                        <div class="top">
                            <div class="item">
                                <img src="../../assets/images/code_app.png" alt="">
                                <svg t="1714147373118" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="4879" width="16" height="16">
                                    <path
                                        d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"
                                        fill="#5D5D5D" p-id="4880"></path>
                                </svg>
                                <p>微信扫一扫关注</p>
                                <p>“快速预约挂号”</p>
                            </div>
                            <div class="item">
                                <img src="../../assets/images/code_login_wechat.png" alt="">
                                <svg t="1714147598098" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                    xmlns="http://www.w3.org/2000/svg" p-id="6014" width="16" height="16">
                                    <path
                                        d="M341.333333 896H256V128h512v768H341.333333z m0-85.333333h341.333334V213.333333H341.333333v597.333334z m85.333334-42.666667v-85.333333h170.666666v85.333333h-170.666666z"
                                        fill="#cdcdcd" p-id="6015"></path>

                                </svg>
                                <p>扫一扫下载</p>
                                <p>“预约挂号”APP</p>
                            </div>

                        </div>
                    </div>
                    <p class="tip">ggt官方平台</p>
                    <p class="tip">快速挂号安全放心</p>
                </el-col>
            </el-row>
            <template #footer>
                <el-button type="primary" size="default" @click="login">关闭窗口</el-button>

            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue';
//引入倒计时组件
import CountDowm from './CountDowm.vue';
//引入element图标
import { User, Lock } from '@element-plus/icons-vue'
//获取use仓库数据{visable控制dialog显示及隐藏}
import useUserStore from '@/store/user';
import { ElMessage } from 'element-plus';
let userStore = useUserStore();
//@ts-ignore
import { useRouter, useRoute } from 'vue-router';
let $route = useRoute();
let $router = useRouter();
//引入微信登陆
//@ts-ignore
import { reqWXlogin } from '@/api/hospital';
// 引入ts
//@ts-ignore
import { WXloginResposeData } from '@/api/hospital/type';
//倒计时
let flag = ref(false);
let scene = ref<number>(0)//0手机号,1微信号
let LoginParams = reactive({
    phone: '',
    code: ''
})
const Loginggt = async () => {
    //发起登录请求
    //成功显示用户框,登录框关闭
    //登陆失败弹出失败请求

    //保证表单两项都符合规则  
    await form.value.validate();
    try {
        //用户登录成功
        await userStore.userLogin(LoginParams);
        //关闭对话框
        userStore.visable = false;
        let redirect = $route.query.redirect;
        if (redirect) {
            $router.push({ path: `/${redirect}` })
        }
        else {
            $router.push('/home')
        }

    } catch (error) {
        ElMessage({
            type: 'error',
            message: (error as Error).message
        })
    }
}
//判断登录手机号还是微信
let login = () => {
    userStore.visable = false
    //发起登录请求
    //如果登录请求成功,显示用户模块
    //如果失败则弹出相应的错误提示
    //获取url参数
}
//计算收集的手机号是否符合规则
//手机正则表达式
let isPhone = computed(() => {
    const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
    //返回布尔值 真代表手机号有效 ,假即..
    return reg.test(LoginParams.phone)
})

//微信登录
let wxlogin = async () => {
    scene.value = 1;
    //发请求获取微信扫码
    //向尚硅谷服务器发送请求
    //还需要携带参数;告诉服务器授权成功后定向到某个页面
    let redirect_URL = encodeURIComponent(window.location.origin + '/wxlogin');
    let result: WXloginResposeData = await reqWXlogin(redirect_URL);
    console.log(result);

    //@ts-ignore
    var obj = new WxLogin({
        self_redirect: true,//手机确认登陆 后可以在iframe跳转到url
        id: "login_container",//显示二维码容器
        appid: result.data.appid,//应用位置标识aooid
        scope: "snsapi_login",//确认当前微信扫码登录已经授权
        redirect_uri: result.data.redirectUri,//填写授权回调域路径,就是用户授权成功以后，微信服务器向公司后台推送code地址
        state: result.data.state,//state就是学校服务器重定向的地址携带用户信息
        style: "black",
        href: ""
    });
}

//获取form实例
let form = ref<any>()

//获取验证码
const getCode = async () => {
    console.log('666');

    //开启倒计时,倒计时组件显示
    flag.value = true
    //通知pinia仓库存储验证码
    try {
        //获取成功回调
        await userStore.getCode(LoginParams.phone)
        LoginParams.code = userStore.UserCode
    }
    catch (error) {

    }
}

//子组件计数器自定义事件
let getFlag = (val: boolean) => {
    flag.value = val
}
//自定义校验规则:手机号码自定义规则
const validatorPhone = (rule: any, value: any, callBack: any) => {
    //rule即为表单规则对象
    // value即为文本内容
    //callback规则回调
    const reg = /^1((34[0-8])|(8\d{2})|(([35][0-35-9]|4[579]|66|7[35678]|9[1389])\d{1}))\d{7}$/;
    if (reg.test(value)) {
        callBack();
    } else {
        callBack(new Error("请输入正确的手机号码格式"));
    }
}

//验证码自定义校验规则
const validatorCode = (rule: any, value: any, callBack: any) => {
    //rule:即为表单校验规则对象
    //value:即为当前文本的内容
    //callBack:回调函数
    if (/^\d{6}$/.test(value)) {
        callBack();
    } else {
        callBack(new Error("请输入正确的验证码格式"));
    }
};

//表单校验规则对象
const rules = {
    //手机号校验规则s
    //required务必要进行校验
    // message代表校验错误提示信息
    //trigger:代表表单触发时机,change文本变化触发的校验
    // phone: [{ required: true, message: '手机号务必是11位', trigger: 'change', min: 11 }],
    //自定义校验规则
    phone: [{ trigger: "change", validator: validatorPhone }],
    code: [{ trigger: "change", validator: validatorCode }]
}

//对话框关闭事件回调
// const close = () => {
//     //清除表单数据
//     Object.assign(LoginParams, { phone: '', code: '' })
//     //清除上一次校验规则
//     form.value.resetFields()
// }

//监听登录事件
watch(() => scene.value, (val: number) => {
    if (val == 1) {
        userStore.queryState()
    }
})
</script>


<script lang="ts">
export default {
    name: 'Login'
}
</script>

<style scoped lang="scss">
.login {
    ::v-deep(.el-dialog__body) {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }

    .logint {
        padding: 20px;
        border: 1px solid #ccc;
    }

    .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;

        p {
            margin: 10px 2px
        }
    }

    .leftContent {
        margin-top: 20px;

        .top {
            display: flex;
            justify-content: space-around;
        }

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
                width: 100px;
                height: 100px;
            }

            p {
                margin: 5px 2px
            }
        }
    }

    .tip {
        text-align: center;
        margin: 20px 2px
    }

    .chatlogin {
        width: 100%;
        height: 500px;
        border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        align-items: center;

        h2 {
            font-size: 20px;
            text-align: center;
            color: black;
            margin-top: 20px
        }

        .chatlogo {
            border: 1px solid #ccc;
            margin-top: 20px
        }

        .wxlogin {
            margin-top: 20px;

            p {
                text-align: center
            }
        }

        .wxlogin2 {
            margin-top: 50px;
            display: flex;
            flex-direction: column;
            align-items: center;

            p {
                text-align: center
            }

            .icon {
                text-align: center
            }
        }
    }
}
</style>